<!--截屏-->
<template>
  <div>
    <el-alert
      title="https://gitee.com/kejiacheng/kscreenshot or @/components/kscreenshot/kss.js  若截图全屏，根节点不是#app，可修改@/components/kscreenshot/kss.js中代码"
      type="success" />
    <div style="margin-top:10px">
      <pre v-highlight>
          <code>
        html2canvas(document.getElementById('app'), { useCORS: true }).then((canvas) => {
          this.start(canvas)
        })
          </code>
        </pre>
    </div>
    <div>
      <el-button @click="startScreenShot1">开始截图1</el-button>
      <el-button @click="startScreenShot2">开始截图2</el-button>
    </div>
    <div v-if="demo">
      <img :src="demo">
    </div>
    <div id="testKissScrren" style="width: 100px;height:100px;border: 1px solid red;" />
  </div>
</template>
<script>
import html2canvas from 'html2canvas'
import Kscreenshot from '@/components/kscreenshot/kss.js'
export default {
  data() {
    return {
      kss: null,
      demo: null
    }
  },
  created() {
  },
  mounted() {
    this.kssInit()
  },

  methods: {
    kssInit() {
      const u = navigator.userAgent
      const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端
      const textType = !isiOS
      this.kss = new Kscreenshot({
        toolShow: {
          text: textType
        },
        immediately: false,
        endCB: (base64) => {
          this.uploadScreen(base64)
        },
        cancelCB: () => {
          console.log('取消了截屏')
        }
      })
    },
    startScreenShot1() {
      this.$modal.msgSuccess('开始截屏')
      this.$nextTick(() => {
        this.kss.startScreenShot()
      })
    },
    startScreenShot2() {
      this.$modal.msgSuccess('开始截屏')
      this.$nextTick(() => {
        html2canvas(document.getElementById('testKissScrren'), { useCORS: true }).then((canvas) => {
          this.kss.startScreenShot(canvas)
        })
      })
    },
    uploadScreen(base64) {
      console.log('结果：')
      console.log(base64)
      this.demo = base64
      console.log('对接base64上传或其他业务')
    }
  }

}
</script>
